"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Menu, Input } from "antd"
import { FolderOutlined, AppstoreOutlined } from "@ant-design/icons"
import axios from "axios"

const { Search } = Input

interface Group {
  name: string
  count: number
}

const Sidebar: React.FC = () => {
  const [groups, setGroups] = useState<Group[]>([])
  const [loading, setLoading] = useState(false)

  const fetchGroups = async () => {
    setLoading(true)
    try {
      const response = await axios.get("http://localhost:3001/api/groups")
      setGroups(response.data)
    } catch (error) {
      console.error("Failed to fetch groups")
    }
    setLoading(false)
  }

  useEffect(() => {
    fetchGroups()
  }, [])

  return (
    <div>
      <div style={{ padding: "16px" }}>
        <Search placeholder="Search groups..." style={{ width: "100%" }} loading={loading} />
      </div>
      <Menu mode="inline" defaultSelectedKeys={["all"]} style={{ borderRight: 0 }}>
        <Menu.Item key="all" icon={<AppstoreOutlined />}>
          All Hosts
        </Menu.Item>
        <Menu.ItemGroup title="Groups">
          {groups.map((group) => (
            <Menu.Item key={group.name} icon={<FolderOutlined />}>
              {group.name} ({group.count})
            </Menu.Item>
          ))}
        </Menu.ItemGroup>
      </Menu>
    </div>
  )
}

export default Sidebar
